<template>
	<div class="cell">
		<div class="cell-content" >
			<div class="cell-center">
				<div class="cell-radio">
					<img :src="items.img"/>
					<img class="cell-play" src="@/assets/img/play.png"/>
				</div>
				<div class="cell-info">
					<span class="cell-id" v-text="items.id"></span>
					<span class="cell-name" v-text="items.name"></span>
				</div>
				<div class="cell-img">
					<div class="cell-img-left">
						<img src="@/assets/img/votenotclick.png" @click="vote()" />
						<span>投票</span>
					</div>
					<div class="cell-img-rigth">
						<img src="@/assets/img/giftnotclick.png" @click="gift()"/>
						<span>礼物</span>
					</div>
				</div>
				<div class="cell-num" v-text="items.num + '票'"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Cell',
		props:{
			items:{
				type:Object,
				default:()=>{
					return{}
				}
			}
		},
		data(){
			return{
// 				celllist:[{
// 					img:require('@/assets/img/video.png'),
// 					id:'yc00001',
// 					name:'天心区靠谱队',
// 					num:'11253'
// 				},{
// 					img:require('@/assets/img/video.png'),
// 					id:'yc00001',
// 					name:'天心区靠谱队',
// 					num:'11253'
// 				},{
// 					img:require('@/assets/img/video.png'),
// 					id:'yc00001',
// 					name:'天心区靠谱队',
// 					num:'11253'
// 				},{
// 					img:require('@/assets/img/video.png'),
// 					id:'yc00001',
// 					name:'天心区靠谱队',
// 					num:'11253'
// 				}]
			}
		}
	}
</script>

<style lang='stylus' scoped>
	.cell
		width 6.3rem
		height 100%
		margin 0 auto
		.cell-content:nth-child(2n)
			margin-left .2rem
		.cell-content
			width 2.98rem
			height 4.21rem
			margin-bottom .26rem
			margin-left .13rem
			background #d7d2d1
			border .02rem solid #382116
			border-radius .2rem
			float left
			.cell-center
				width 2.72rem
				height 3.95rem
				margin 0.13rem 0.13rem 0.13rem 0.14rem
				border 0.01rem solid #382116
				border-radius 0.2rem
				background #e7e6e5
				.cell-radio
					width 2.7rem
					height 2.14rem
					position relative
				.cell-radio img:first-child
					width 2.7rem
					height 2.14rem
					border-radius .2rem .2rem 0 0
				.cell-play
					position absolute
					top 0.83rem
					margin-left 1.03rem
					width .72rem
					height .72rem
				.cell-info
					display flex
					justify-content space-between
					align-items center
					text-align center
					margin .15rem auto 0
					width 2.46rem
					height .25rem
					border .01rem solid #86706b
					border-radius .05rem
					.cell-id
						width 1.13rem
						line-height .25rem
						background #604942
						color #efeded 
						font-size .24rem
						transform scale(.75)
						transform-origin 50% 50%
						white-space nowrap
					.cell-name
						width 1.33rem
						line-height .25rem
						background #ffffff
						color #7c6864
						font-size .24rem
						transform scale(.75)
						transform-origin 50% 60%
						white-space nowrap
				.cell-img
					width 100% 
					height .93rem
					display flex 
					justify-content space-between
					align-items center
					.cell-img-left,.cell-img-rigth
						font-size .24rem
						transform scale(.79)
						transform-origin 100% 100%
						margin-left .39rem
						img 
							width .44rem
							height .44rem
							display block
					.cell-img-rigth
						margin-right .39rem
				.cell-num
					width 2.72rem
					height .49rem
					font-size .32rem
					text-align center
					background #604942
					border-radius 0 0 .2rem .2rem
					color #e7e6e5
</style>
